<template>
    <div class="container">
        <div class="explain back-fff">
            <div class="h4">Change Password</div>
        </div>
        <div class="forms back-fff">
            <el-form ref="form" :model="form" label-width="160px" class="form">
                <el-form-item label="New Password" prop="F_Password" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                    <el-input type="password" v-model="form.F_Password" placeholder="Please input New Password" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="Confirm your Password" prop="F_AgainPassword" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                    <el-input type="password" v-model="form.F_AgainPassword" placeholder="Please input Confirm your Password" maxlength="20"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="sava back-fff flex-center">
            <el-button type="primary" @click="register" :loading="loading">Save Changes</el-button>
        </div>
    </div>
</template>
<script>
import { ResetPwdTicketApi } from "@/api/user";
export default {
	data() {
		return {
			form: {
				Ticket:this.$route.query.Ticket || '',
				F_Email:this.$route.query.F_Email || '',
			},
            loading:false
		};
	},
	methods: {
		register() {
			this.$refs.form.validate((valid) => {
				if (!valid) return false;
				if(this.form.F_AgainPassword !== this.form.F_Password){
					return this.$message.warning({message: 'The two passwords are inconsistent'})
				}
				let form = {...this.form};
				delete form.F_AgainPassword;
                this.loading = true;
				ResetPwdTicketApi(form).then(() => {
                    this.loading = false;
					this.$message.success({message: 'Set successfully'})
                    this.$router.push({path:'/login'})
				}).catch(() => (this.loading = false));
			});
		},
	},
};
</script>
<style scoped lang="scss">
.explain{
    padding: 40px;
    text-align: center;
    margin-top: 20px;
    .h4{
        font-size: 18px;
        font-weight: bold;
    }
}
.forms{
    padding: 30px;
    border-top: 1px solid #eee;
    .form{
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        ::v-deep .el-form-item__label{
            color: #666666;
            font-size: 14px;
            font-weight: 400;
        }
        ::v-deep .el-select{
            width: 100%;
        }
    }
}
.sava{
    padding: 20px;
    margin-top: 10px;
}
</style>